/** @format */

import { readFileSync } from "fs-extra";
import { join } from "path";
import { App, createApp } from "vue";
import { cfgMgr } from "../ExportConfig";
const panelDataMap = new WeakMap<any, App>();
/**
 * @zh 如果希望兼容 3.3 之前的版本可以使用下方的代码
 * @en You can add the code below if you want compatibility with versions prior to 3.3
 */
// Editor.Panel.define = Editor.Panel.define || function(options: any) { return options }
module.exports = Editor.Panel.define({
    listeners: {
        show() {
            console.log("show");
        },
        hide() {
            console.log("hide");
        },
    },
    template: readFileSync(join(__dirname, "../../../static/template/default/index.html"), "utf-8"),
    style: readFileSync(join(__dirname, "../../../static/style/default/index.css"), "utf-8"),
    $: {
        app: "#app",
        text: "#text",
        list: "#list",
    },
    methods: {
        hello() {
            if (this.$.text) {
                this.$.text.innerHTML = "hello";
                console.log("[cocos-panel-html.default]: hello");
            }
        },
    },
    ready() {
        if (this.$.app) {
            const app = createApp({});
            app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("ui-");

            const div = this.$.list || null;
            if (div) {
                div.innerHTML += `<my-export></my-export>`;
                app.component("MyExport", {
                    template: readFileSync(join(__dirname, "../../../static/template/vue/export.html"), "utf-8"),

                    methods: {
                        onExport() {
                            cfgMgr.exportCfg();
                        },
                    },
                });
            }
            //将应用实例挂载到 DOM 元素
            app.mount(this.$.app);
            panelDataMap.set(this, app);
        }
    },
    beforeClose() {},
    close() {
        const app = panelDataMap.get(this);
        if (app) {
            app.unmount();
        }
    },
});
